<template>
    <div class="footer">
        <div v-for="item of navList" :key="item.id">
         <router-link class="nav-item" :to="item.path">
            <i :class="item.iconClass"></i>
            <span>{{item.desc}}</span>
         </router-link>
        </div>
    </div>
</template>
<script>
export default {
    props:["navList"],
    name:"Footer",
    data(){
        return {
           
        }
    }
}
</script>
<style lang="stylus" scoped>
    @import '~styles/varables.styl'
    .footer
        position:absolute
        bottom 0
        left:0
        display:flex
        justify-content:space-around
        align-items:center
        background:$bgColor
        height:1rem
        width:100%
        .nav-item
            color:#999
            height:1rem
            display:flex
            flex-direction:column
            justify-content:space-around
            align-items:center
        .router-link-exact-active
            color:$hoverColor !important
</style>